<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib prefix="xdz" uri="/xdztools" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="${xdz:domain() }/css/bootstrap.min.css">
<link rel="stylesheet" href="${xdz:domain() }/css/font-awesome.min.css">
<%-- <link rel="stylesheet" href="${xdz:domain() }/css/style.min.css"> --%>
<link rel="stylesheet" href="${xdz:domain() }/css/kkpager_blue.css">
<link rel="stylesheet" href="${xdz:domain() }/css/jquery.treetable.theme.default.css?v=1" />
<link rel="stylesheet" href="${xdz:domain() }/css/jquery.treetable.css?v=1" />
<script type="text/javascript">
    function openAdd() {
        location.href = "../systemMenuBase/addPage";
    }
    
    function refresh(){
    	 location.href = "../systemMenuBase/list";
    }
    
    function del(id) {
		layer.confirm('是否确认删除？', {
				btn: ['确认','取消']
			}, function(){
				location.href = "../systemMenuBase/delete?id="+id;
			}, function(){
				layer.close();
			});
		}
</script>
</head>
<body>
    <form action="../systemMenuBase/list" id="systemMenuBaseForm" method="post">
		<div class="panel panel-default">
			<header class="panel-heading"><h3 class="panel-title">菜单列表</h3></header>
			<div class="panel-body">
				<div class="row">
					<div class="col-md-2">
						<input type="text" class="form-control input-sm" placeholder="菜单名" name="menuName" value="${condition.menuName }">
					</div>
					<div class="col-md-2">
						<input type="text" class="form-control input-sm" placeholder="上级菜单" name="parentName" value="${condition.parentName }">
					</div>
					<div class="col-md-2">
						<button class="btn btn-primary btn-sm" type="submit">查询</button>
						<button class="btn btn-primary btn-sm" type="button" onclick="refresh()">刷新</button>
					</div>
					<div class="col-md-2 pull-right">
						<button type="button" class="btn btn-primary btn-sm pull-right" onclick="openAdd()">新增</button>
					</div>
				</div>
			</div>
			<div class="table-responsive scroll-wrapper">
				<table class="table table-striped  table-hover table-condensed treetable" id="treeTable1">
                   <thead>
                       <tr>
                           <th>菜单名</th>
                           <th>排序号</th>
                           <th>操作</th>
                       </tr>
                   </thead>
                   <tbody>
                       <c:forEach var="list" items="${list }">
							<tr data-tt-id="${list.menuId }" <c:if test="${list.parentId != 0 }">data-tt-parent-id="${list.parentId}"</c:if>>
								<td>
									<span <c:choose>
										 	<c:when test="${list.parentId==0 }">class="folder"</c:when>
										 	<c:otherwise>class="file"</c:otherwise>
										</c:choose>>${list.menuName }</span>
								</td>
	                            <td>${list.orderBy }</td>
								<td><a class="operation" href="../systemMenuBase/updatePage?id=${list.menuId }">修改</a> | 
									<a class="operation" href="../systemMenuBase/updatePage?id=${list.menuId }&copy=1">复制</a> | 
									<a class="operation" href="javascript:void(0);" onclick="del('${list.menuId }')">删除</a></td>                                    
							</tr>
                       </c:forEach>
                   </tbody>
               	</table>
            </div>
        </div>
    </form>
    <script src="${xdz:domain() }/js/jquery.min.js"></script>
    <script src="${xdz:domain() }/js/jquery.treetable.js"></script>
    <script src="${xdz:domain() }/js/bootstrap.min.js"></script>
    <script src="${xdz:domain() }/js/plugins/fuelux/fuelux.js"></script>
    <script src="${xdz:domain() }/js/underscore-min.js"></script>
    <script src="${xdz:domain() }/js/plugins/dataTables/jquery.dataTables.js"></script>
    <script src="${xdz:domain() }/js/plugins/jquery-ui/jquery-ui.min.js"></script>
    <script src="${xdz:domain() }/js/app.js"></script>
    <script src="${xdz:domain() }/js/app.plugin.js"></script>
    <script src="${xdz:domain() }/js/app.data.js"></script>
    <script src="${xdz:domain() }/js/pagination.js"></script>
    <script src="${xdz:domain() }/js/jquery.treetable.js"></script>
    <script src="${xdz:domain() }/js/plugins//sparkline/jquery.sparkline.min.js"></script>
    <script type="text/javascript" src="${xdz:domain() }/js/plugins/layer/layer.min.js"></script>
        <script>
    $(function(){
        $('#treeTable1').treetable({
        	expandable: true,
        	clickableNodeNames: true
        	});
    });
      $("#treeTable1 .file, #treeTable1 .folder").draggable({
        helper: "clone",
        opacity: .75,
        refreshPositions: true, // Performance?
        revert: "invalid",
        revertDuration: 300,
        scroll: true
      });
    $("#treeTable1 .file, #treeTable1 .folder").each(function() {
        $(this).parents("tr").droppable({
          accept: ".file, .folder",
          drop: function(e, ui) {
            var droppedEl = ui.draggable.parents("tr");
            var start = droppedEl.attr("data-tt-id");
            var that=$(this);
            layer.confirm(
					'确定要移动吗？',
					{
						btn : [ '确定', '取消' ], //按钮
						shadeClose : false, //点击遮罩关闭层
						closeBtn : false, //不显示关闭按钮
						title : false,
						shade : 0.6
					//不显示遮罩
					},
					function(index) {
						var url = "../systemMenuBase/move";
						var destParentId = that.data("ttParentId");
						var destId = that.data("ttId");
						var afterId = destId;
						var isDroppedFolder = $("#treeTable1").treetable("node", start).isBranchNode();
						var isDestFolder = $("#treeTable1").treetable("node", afterId).isBranchNode();
						if(isDroppedFolder){
							//拖拽目录，只能放在目录后面，不能放在目录里面
							var destParent;
							if(isDestFolder){
								destParent = destId;
							}
							else{
								destParent = destParentId;
							}
							if(destParent == undefined){
								afterId = null;
							}
							else{
								var node = $("#treeTable1").treetable("node", destParent);
								if(node != undefined && node != null){
									if(node.children.length > 0)
										afterId = node.children[node.children.length-1].id;//定位在最后一个孩子后面
								}
								else
									afterId = null;
							}
							destParentId = 0;
						}
						else{
							//拖拽叶子节点
							if(isDestFolder){
								destParentId = destId;
							}
						}
						if(afterId == null)//出错，不做任何移动
							return;
						
						$.ajax({
							url : url,
							async : false,
							dataType : "text",
							data:{
								"menuId":start,
								"parentId":destParentId,
								"afterId":destId//当拖拽目录时，ajax和js使用不同的目标Id，ajax用目标目录，js用目标目录里面的最后一个孩子
							},
							type : "POST",
							success : function(data) {
								$("#treeTable1").treetable("move", start, afterId);
								/* $("#treeTable1").treetable("sortBranch", $("#treeTable1").treetable("node", destParentId), 1); */
								layer.close(index);
							}
							})
					}, function() {

					});

          },
          hoverClass: "accept",
          over: function(e, ui) {
            var droppedEl = ui.draggable.parents("tr");
            if(this != droppedEl[0] && !$(this).is(".expanded")) {
              $("#treeTable1").treetable("expandNode", $(this).data("ttId"));
            }
          }
        });
      }); 
    </script>
</body>
</html>
